<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/" >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务详情页-家政网</title>
    <meta name="keywords" content="家政网">
    <meta name="description" content="">
    <!-- 删除默认的苹果工具栏和菜单栏 -->
    <meta name =“apple-mobile-web-app-capable”content =“yes”/>  
    <!-- 苹果手机顶部为黑色 -->
    <meta name =“apple-mobile-web-status-bar-style”content =“block”/>  
    <link rel="icon" href="./images/icon.icon" type="images/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/serviceid.css">

</head>
<body>
    <!-- logo -->
    <header>
        <div class="header-logo">
            <a href="">
                <span class="logo-icon"></span>
            </a>
        </div>
        <div class="header-search">
            <a href="">深圳 v</a>
            <input type="text" value="搜索">
        </div>
    </header>

    <!-- 服务介绍  -->
    <div class="service-container">
        <div class="service-img"><img src="./images/service-img.jpg" alt=""></div>
        <div class="service-info">
            <div class="buy-price">100元/次</div>
            <div class="service-title">
                <h1>家用空调安装，5年专业安装经验，3年质保服务</h1>
                <p>迎新年新年大筹备，空调安装不收加高费</p>
            </div>
            <div class="service-atcive">
                
                <p><span class="atcive">优惠券</span> <span class="atcive-redpack">30元通用，500起</span></p>
                <p><span class="atcive">满减</span> <span class="atcive-redpack">满300立减20元</span></p>
            </div>

            <div class="service-add"><span class="atcive">服务区域：</span> <span>全深圳市</span></div>
            <div class="service-other"><span class="atcive">其他：</span> <span class="buy-list">钻孔</span><span class="buy-list">门窗拆装</span></div>
            <div class="service-buy">
                <div class="buy-minus-add">
                    <span class="minus">-</span>
                    <input class="buy-nub" type="text" value="1">
                    <span class="add">+</span>
                </div>

                <div class="click-buy"><a href="">购买</a><span>已有89人购买</span></div>
            </div>
        </div>
    </div>
    <!-- 服务商介绍 -->
    <div class="service-master">
        <div class="sub-title">
            <h3>师傅信息</h3>
        </div>
        <div class="servie-master-container">
            <div class="master-header"><img src="./images/header.jpg" alt=""></div>

            <div class="master-info">
                <div><span class="master-name">张师傅</span><span class="master-validate">个人验证</span></div>
                <div class="master-sell"><span>擅长：</span><a href="">家电安装</a> <a href="">家电维修</a></div>
                <div><a href="">24个服务正在出售 <span class="underline">查看</span></a></div>
            </div>

        </div>
    </div>

    <!-- 服务介绍 -->
    <div class="service-infomation clear">
        <div class="sub-title">
            <h3>费用说明</h3>
        </div>
        <div class="table-price">
            <table>
                <tbody class="tbody-container">
                    <tr>
                        <th>类型</th>
                        <th>价格（元/每次）</th>
                        <th>备注</th>
                    </tr>

                    <tr>
                        <td>基本安装</td>
                        <td>100</td>
                        <td>&lt;=7层以下</td>
                    </tr>
                
                    <tr>
                        <td>加高费</td>
                        <td>30</td>
                        <td>每多7层加收30元</td>
                    </tr>

                    
                    <tr>
                        <td>门窗拆装费</td>
                        <td>30</td>
                        <td>空调安装在外面，需要拆防盗窗栏</td>
                    </tr>
                    <tr>
                        <td>钻孔费</td>
                        <td>100</td>
                        <td>室内机和室外机连接孔</td>
                    </tr>
                    <tr>
                        <td>其他</td>
                        <td>具体价格协商</td>
                        <td>视情况协商而定</td>
                    </tr>

                </tbody>
            </table>
        </div>
        <!-- 服务详情 -->
        <div class="service-details">
            <div class="sub-title">
                <h3>服务详情</h3>
            </div>
            <div class="details-article">
                <article>
                    由于空调只有在进行安装、连接与调试之后，才能形成一个完整的运行系统。空调安装对日后空调使用安全和空调质量有很大的影响。因此空调业内有“三分质量、七分安装”之说。而要确保空调安装质量，做好安装前的各类准备工作就显得十分重要。
                </article>
                <section class="details-standard">
                    <p class="sub-details">完成标准</p>
                    <ul class="service-comleta">
                        <li>室内机2年内稳固</li>
                        <li>无漏水进房间内</li>
                        <li>室外机稳定安全</li>
                        <li>………………</li>
                    </ul>

                </section>

            </div>
        </div>

        <!-- 售后服务 -->
        <div class="sell-after">
            <div class="sub-title">
                <h3>售后服务</h3>
            </div>
            
            <div class="sell-items">
                <img src="./images/service-after.jpg" alt="">
                <img src="./images/service-after.jpg" alt="">
                <img src="./images/service-after.jpg" alt="">
            </div>
        </div>
        
        <!-- 用户评价 -->
        <div class="user-assess">
            <div class="sub-title">
                <h3>用户评价</h3>
            </div>

            <div class="assess-container">
                <div class="assess-lv">
                    <span>有图（10）</span>
                    <span>好评（50）</span>
                    <span>中评（5）</span>
                    <span class="red">差评（1）</span>
                </div>
                

                <div class="assess-item">
                    <ul>
                        <li class="assess-lists">
                            <!-- <div class="assess-details-img"><img src="./images/promise.jpg" alt="家电安装"></div> -->

                            <div class="assess-content-container">
                                <div class="assess-content">
                                    <span>安装很到位，师傅很nice，整个过程表现得非常专业，安装很nice，
                                        整个过程表现很到位，师傅得非常专业安装很到位，师傅很nice.
                                    </span>
                                </div>
                                <div class="assess-star"></div>
                            </div>

                            <div class="assess-user-info">
                                <div class="user-info-header">
                                    <img src="./images/header.jpg" alt="">
                                    <span>家政网用户a</span>
                                </div>
                                <div class="assess-date">2019.03.14 22:20:01</div>
                            </div>
                        </li>
                        <li class="assess-lists">
                            <!-- <div class="assess-details-img"><img src="./images/promise.jpg" alt="家电安装"></div> -->

                            <div class="assess-content-container">
                                <div class="assess-content">
                                    <span>安装很到位，师傅很nice，整个过程表现得非常专业，安装很nice，
                                        整个过程表现很到位，师傅得非常专业安装很到位，师傅很nice.
                                    </span>
                                </div>
                                <div class="assess-star"></div>
                            </div>

                            <div class="assess-user-info">
                                <div class="user-info-header">
                                    <img src="./images/header.jpg" alt="">
                                    <span>家政网用户a</span>
                                </div>
                                <div class="assess-date">2019.03.14 22:20:01</div>
                            </div>
                        </li>
                        <li class="assess-lists">
                            <!-- <div class="assess-details-img"><img src="./images/promise.jpg" alt="家电安装"></div> -->

                            <div class="assess-content-container">
                                <div class="assess-content">
                                    <span>安装很到位，师傅很nice，整个过程表现得非常专业，安装很nice，
                                        整个过程表现很到位，师傅得非常专业安装很到位，师傅很nice.
                                    </span>
                                </div>
                                <div class="assess-star"></div>
                            </div>

                            <div class="assess-user-info">
                                <div class="user-info-header">
                                    <img src="./images/header.jpg" alt="">
                                    <span>家政网用户a</span>
                                </div>
                                <div class="assess-date">2019.03.14 22:20:01</div>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- 评价翻页 -->
                    <!-- 翻页 -->
                <div class="page">
                    <div class="page-container">
                        <a href="">上一页</a>
                        <a href="">下一页</a>
                    </div>
                </div>


            </div>
        </div>
    </div>

    <!-- 其他在售服务 -->
    <div class="other-sell">
        <div class="sub-title">
            <h3>其他在售服务</h3>
        </div>
        <div class="other-sell-container">
            <ul>
                <li class="other-sell-list">
                    <div class="other-sell-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="other-sell-info">
                        <p class="other-sell-title">玻璃淋浴房安装，专业家居五金洁具安装师傅</p>
                        <p><span class="other-sell-nub">已售：65</span> <span class="other-sell-price">100元/次</span></p>
                    </div>
                </li>
                <li class="other-sell-list">
                    <div class="other-sell-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="other-sell-info">
                        <p class="other-sell-title">玻璃淋浴房安装，专业家居五金洁具安装师傅</p>
                        <p><span class="other-sell-nub">已售：65</span> <span class="other-sell-price">100元/次</span></p>
                    </div>
                </li>
                <li class="other-sell-list">
                    <div class="other-sell-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="other-sell-info">
                        <p class="other-sell-title">玻璃淋浴房安装，专业家居五金洁具安装师傅</p>
                        <p><span class="other-sell-nub">已售：65</span> <span class="other-sell-price">100元/次</span></p>
                    </div>
                </li>
                <li class="other-sell-list">
                    <div class="other-sell-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="other-sell-info">
                        <p class="other-sell-title">玻璃淋浴房安装，专业家居五金洁具安装师傅</p>
                        <p><span class="other-sell-nub">已售：65</span> <span class="other-sell-price">100元/次</span></p>
                    </div>
                </li>                
            </ul>
        </div>
    </div>

    <!-- 别人关注的 -->
    <div class="other-sell">
        <div class="sub-title">
            <h3>其他在售服务</h3>
        </div>
        <div class="other-sell-container">
            <ul>
                <li class="other-sell-list">
                    <div class="other-sell-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="other-sell-info">
                        <p class="other-sell-title">玻璃淋浴房安装，专业家居五金洁具安装师傅</p>
                        <p><span class="other-sell-nub">已售：65</span> <span class="other-sell-price">100元/次</span></p>
                    </div>
                </li>
                <li class="other-sell-list">
                    <div class="other-sell-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="other-sell-info">
                        <p class="other-sell-title">玻璃淋浴房安装，专业家居五金洁具安装师傅</p>
                        <p><span class="other-sell-nub">已售：65</span> <span class="other-sell-price">100元/次</span></p>
                    </div>
                </li>
                <li class="other-sell-list">
                    <div class="other-sell-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="other-sell-info">
                        <p class="other-sell-title">玻璃淋浴房安装，专业家居五金洁具安装师傅</p>
                        <p><span class="other-sell-nub">已售：65</span> <span class="other-sell-price">100元/次</span></p>
                    </div>
                </li>
                <li class="other-sell-list">
                    <div class="other-sell-img"><img src="./images/service-img.jpg" alt=""></div>
                    <div class="other-sell-info">
                        <p class="other-sell-title">玻璃淋浴房安装，专业家居五金洁具安装师傅</p>
                        <p><span class="other-sell-nub">已售：65</span> <span class="other-sell-price">100元/次</span></p>
                    </div>
                </li>                
            </ul>
        </div>
    </div>






    <!-- 版权信息 -->
    <div class="footer">
        <div class="footer-container">
            <p>家政网，你的专业私人管家助手</p>
            <p>家政热线：<span>400-200-300</span>&nbsp;&nbsp;&nbsp;<span>031-516-511</span></p>
            <p class="footer-contact">
                <a href="">成为合伙人</a> |
                <a href="">关于我们</a> |
                <a href="">意见反馈</a> |   
                <a href="">在线招聘</a>
            </p>
        </div>
    </div>

    <!-- 悬浮导航 -->
    <div class="suspend-footer">
        <ul class="suspend-container">
            <li class="suspend-list">
                <a href="">
                    <div><span class="home-icon suspend-icons"></span></div>
                    <div class="home-title">首页</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="publish-icon suspend-icons"></span></div>
                    <div class="home-title">发布</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="information-icon suspend-icons"></span></div>
                    <div class="home-title">消息</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="user-icon suspend-icons"></span></div>
                    <div class="home-title">我的</div>
                </a>
            </li>
        </ul>
    </div>

    <script src="./js/serviceid.js"></script>
</body>
</html>